﻿<!DOCTYPE html>
<html>
     <head>
          <meta charset="utf-8">
          <title>柱状图</title>
          <!-- 引入 echarts.js -->
          <script src="./echarts.js"></script>
          <script src="./qwebchannel.js"></script>
     </head>
     <style>
        #main div{
            float:left;
        }
     </style>
     <body>
          <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
          <div id="main" style="width: 1690px;height:400px;">
              <div id="chart1" style="width: 845px;height:300px;"></div>
              <div id="chart2" style="width: 845px;height:300px;"></div>
              <div id="chart3" style="width: 845px;height:300px;"></div>
              <div id="chart4" style="width: 845px;height:300px;"></div>
              <div id="chart5" style="width: 845px;height:300px;"></div>
              <div id="chart6" style="width: 845px;height:300px;"></div>
          </div>

          <script type="text/javascript">
          // 基于准备好的dom，初始化echarts实例
          var myChart1 = echarts.init(document.getElementById('chart1'));
          var myChart2 = echarts.init(document.getElementById('chart2'));
          var myChart3 = echarts.init(document.getElementById('chart3'));
          var myChart4 = echarts.init(document.getElementById('chart4'));
          var myChart5 = echarts.init(document.getElementById('chart5'));
          var myChart6 = echarts.init(document.getElementById('chart6'));
          var option = {
              title: {
                   text: '输入波形'
              },
              tooltip: {},
              legend: {
                   data: ['销量']
              },
              xAxis: {
                   data: ["1","2","3","4","5"]
              },
              yAxis: {},
              dataZoom: [
                    {
                        show: true,
                        realtime: true,
                    },
                    {
                        type: 'inside',
                        realtime: true,
                    }
              ],
              tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                      type: 'cross',
                      animation: false,
                      label: {
                          backgroundColor: '#505765'
                      }
                  }
              },
              series: [{
                   //name: '销量',
                   type: 'line',
                   //data: ["1","2","3","4","5"],
                   symbol: "none"
              }]
          }
          // 指定图表的配置项和数据
          myChart1.setOption(option);
          option.title.text = '输入波形频谱';
          myChart2.setOption(option);
          option.title.text = '冲击响应';
          myChart3.setOption(option);
          option.title.text = '响应频谱';
          myChart4.setOption(option);
          option.title.text = '输出波形';
          myChart5.setOption(option);
          option.title.text = '输出波形频谱';
          myChart6.setOption(option);
          var context;
          function init() {
            if(typeof qt != 'undefinded') {
                new QWebChannel(qt.webChannelTransport, function(channel) {
                    context = channel.objects.context;
                    context.SendSrcData.connect(function(data){
                        alert(data.type)
                        if(data.type == "input") {
                            //alert("input");
                            option.xAxis.data = data.xAxis;
                            option.series[0].data = data.data;
                            myChart1.setOption(option);
                        }
                        if(data.type == "inputFFT") {
                            //alert("inputFFT");
                            option.xAxis.data = data.xAxis;
                            option.series[0].data = data.data;
                            myChart2.setOption(option);
                        }
                    });
                });
            }
            else {
            }
          }
          // 向Qt发送消息
          function sendMessage(msg) {
            if(typeof context != 'undefinded') {
                context.RecvJSMsg(msg);
            }
            else {
                alert("context undefinded");
            }
          }
          function recvMessage(msg) {
            data = eval('(' + msg + ')');
            if(data.type == "input") {
                option.title.text = '输入波形';
                option.xAxis.data = data.xAxis;
                option.series[0].data = data.data;
                myChart1.setOption(option);
            }
            if(data.type == "inputFFT") {
                option.title.text = '输入波形频谱';
                option.xAxis.data = data.xAxis;
                option.series[0].data = data.data;
                myChart2.setOption(option);
            }
            if(data.type == "impulse") {
                option.title.text = '冲击响应';
                option.xAxis.data = data.xAxis;
                option.series[0].data = data.data;
                myChart3.setOption(option);
            }
            if(data.type == "impulseFFT") {
                option.title.text = '响应频谱';
                option.xAxis.data = data.xAxis;
                option.series[0].data = data.data;
                myChart4.setOption(option);
            }
            if(data.type == "output") {
                option.title.text = '输出波形';
                option.xAxis.data = data.xAxis;
                option.series[0].data = data.data;
                myChart5.setOption(option);
            }
            if(data.type == "outputFFT") {
                //alert("outputFFT");
                option.title.text = '输出波形频谱';
                option.xAxis.data = data.xAxis;
                option.series[0].data = data.data;
                myChart6.setOption(option);
            }
          }
          init();
          </script>
     </body>
</html>
